<template>
	<view class="index-page">
		<tabBar selectedIndex=0></tabBar>

		<!-- <view class="title-txt">首页</view> -->
		<view class="addrPanel">
			<view class="addr c-flex c-item-center" v-if="addr" @tap="addrShow()">{{addr}}
				<view></view>
			</view>
			<view class="addrList c" v-if="addrListBool">
				<view  class="c-flex jc-between c-item-center " v-for="(item,index) in addrList" :key='index'
					@tap="seleAddr(item)">
					<text v-if="item.auditStatus ===1">{{item.street}}{{item.villageName}}{{item.address}}</text>


					<text v-if="item.auditStatus ===0">{{item.street}}{{item.villageName}}{{item.address}}<text
							style="margin-left: 10rpx; color: #999;">(审核中)</text></text>
					<image src="@/static/images/common/addr-sele.png" v-if='item.selected'></image>
				</view>
				
			</view>
		</view>
		<view class="top-pic">
			<image :src="remoteImgUrl+'index/top_0.png'" @click="goPage()"></image>
		</view>
		<view class="content">
			<view class="tabs-con c-flex jc-between">
				<view class="tab-item c-flex jc-center c-item-center c-flex-1" v-for="(item,i) in tabs" :key="i"
					@click="onTabChange(item)">
					<image class="tab-bg" v-if="item.value == 1 && !item.selected"
						:src="remoteImgUrl+'index/tab-sele-left.png'"></image>
					<image class="tab-bg" v-if="item.value == 2 && !item.selected"
						:src="remoteImgUrl+'index/tab-sele-right.png'"></image>
					<view class="label">
						<text :class="{'selected':item.selected}">{{item.label}}</text>
						<image class="sele-line" v-if="item.selected" :src="remoteImgUrl+'index/sele-line.png'"></image>
					</view>
				</view>
			</view>
		</view>

		<shopPage v-if="type ==='user'" :category='tabItem.value' :userType='addrItem.type' :windowHeight='windowHeight'
			:refreshIndex='refreshIndex'></shopPage>

		<uni-popup ref="openAccount" type="center" :mask-click="true" class="popup">
			<view class="panel">
				<image :src="remoteImgUrl+'common/openAccount.png'"></image>
				<view class="desc">根据液化气用户条款，当前用户下单需要开户申请后才能使用</view>
				<view class="btn" @click="openAccountHandler">立即申请开户</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import shopPage from '@/components/shopPage/shopPage.vue';
	import {
		INDEX_TABS
	} from '@/utils/global.js';
	export default {
		components: {
			shopPage
		},
		data() {
			return {
				tabs: [{
					label: '今日气价',
					value: 1,
					selected: false
				}, {
					label: '燃气配件',
					value: 2,
					selected: false
				}],
				tabItem: null,
				remoteImgUrl: this.$API.IMG_URL + '/liquefied-mall/',
				addrListBool: false,
				addrList: [],
				addrItem: null,
				refreshIndex: false,
				addr: '',
				setTimeoutId: null,
				type: null,
				addrSeleId:null,
				windowHeight:0
			};
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});
			this.tabs = INDEX_TABS;


			this.type = this.$store.getters.role;
			if (this.type === 'user') {
				// this.tabs =INDEX_TABS;
				// this.$store.commit('setRole','user')
				// uni.switchTab({
				// 	url:'../plat-menu/index'
				// })
			} else if (this.type === 'delivery') {
				this.$store.commit('setRole', 'delivery')
				uni.redirectTo({
					url: '../plat-menu/delivery'
				})
			}
			this.windowHeight = uni.getSystemInfoSync().windowHeight-226-50-66-55;
			   
				  console.log('可使用高度：',this.windowHeight)
			    
		},
		onShow() {

			console.log('onShow')

			this.type = this.$store.getters.role;
			this.initTabbar();
			if (this.type == 'user') {

				this.getUserAddr();


			}
		},
		methods: {
			initTabbar() {

				this.tabs.forEach(item => {
					item['selected'] = false;
				});
				this.tabItem = this.$store.getters.indexTabs;

				this.tabItem.selected = true;


			},
			addrShow() {
				this.addrListBool = !this.addrListBool;
				this.setTimeoutId = setTimeout(() => {
					this.addrListBool = false;
					clearTimeout(this.setTimeoutId)
				}, 5000)
			},
			seleAddr(item) {
				if(item.auditStatus ===0) return
				clearTimeout(this.setTimeoutId)
				console.log(this.addrItem.type, item.type)
				if (this.addrItem.type !== item.type) {
					this.$API.clearCart({}).then(res => {
						if (res.code === 0) {
							this.$store.commit('setCartChooseGood',[])
							uni.$emit('updateGoodCount')
						}
					})

				}
				this.addrItem.selected = false;
				item.selected = true;
				this.addrItem = item;
				this.$store.commit('setUserSeleAddr', this.addrItem);
				this.addr = this.addrItem.villageName;
				setTimeout(() => {
					this.addrListBool = false;
				}, 500)
				this.refreshIndex = !this.refreshIndex;
				console.log(this.addrItem.type, this.refreshIndex)
			},
			openAccountHandler() {
				this.$refs.openAccount.close();
				uni.navigateTo({
					url: '/pages/client/user/user-list'
				})
			},
			getUserAddr() {
				this.$API.userAddr({
					auditStatus: ''
				}).then(res => {
					if (res.code === 0) {
						const arr = res.list;
						if (arr.length == 0) {
							this.$refs.openAccount.open();
						} else {
							arr.map(item => {
								item.selected = false;
								item.type = String(item.type);
							})
							const newArr = arr.filter(item => item.auditStatus !== 2)
							let tmpAddr = ''
							if (!this.$store.getters.userSeleAddr) {
								this.addrItem = newArr[0];
								this.addrItem.selected = true;
								this.$store.commit('setUserSeleAddr', this.addrItem);
								this.addr =this.addrItem.villageName;
									
								// this.addr = this.addrItem.street + this.addrItem.villageName + this.addrItem
								// 	.address;
									this.addrSeleId =  this.addrItem.id;
							} else {
								let _id;
								tmpAddr = this.$store.getters.userSeleAddr;
								newArr.forEach((item,index) => {
									if (item.id ==tmpAddr.id) {
										_id = index;
										
									}
								})
								this.addrItem = newArr[_id];
								this.addrItem.selected = true;
								this.addr = `${tmpAddr.villageName}`;
								this.addrSeleId =  this.addrItem.id;
								
								
							}
							
							
							
							
							this.addrList = newArr;
							console.log('当前地址：',this.addrList)
							
						}

					}
				}).catch(() => {

				});
			},
			goPage() {
				//uni.navigateBack({delta:1});
			},

			onTabChange(item) {
				this.tabItem.selected = false;
				item.selected = true;
				this.tabItem = item;
				console.log(this.tabItem.value)
				this.$store.commit('setIndexTabs', item)
				//uni.setStorageSync('tabIndex',this.tabItem.value)
			}
		}
	}
</script>
<style>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.index-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 10%);
		//padding-bottom: 150rpx;
		.popup {
			.panel {
				width: 532rpx;
				height: 624rpx;
				background-color: #fff;
				border-radius: 30rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.desc {
					position: absolute;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					top: 365rpx;
					width: 77%;
					left: 50%;
					transform: translate(-50%, -5%);
				}

				.btn {
					position: absolute;
					width: 352rpx;
					height: 80rpx;
					background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
					border-radius: 40rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					top: 365rpx;
					left: 50%;
					transform: translate(-50%, 155%);

				}
			}

		}

		.addrPanel {
			position: relative;
			height: 21px;
			top: 110rpx;
			left: 30rpx;

			.addr {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #191919;
				line-height: 42rpx;

				view {
					width: 0;
					height: 0;
					border-top: 7px solid rgba(102, 102, 102, 1);
					border-right: 6px solid transparent;
					border-left: 6px solid transparent;
					margin-left: 12rpx;
				}
			}

			.addrList {
				background-color: #fff;
				position: absolute;
				z-index: 10;
				border-radius: 15rpx;
				width: 95%;
				top: 60rpx;
				left: -10rpx;
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

				view {
					padding-left: 30rpx;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 60rpx;
					}
				}
			}
		}

		.top-pic {
			width: 708rpx;
			height: 286rpx;
			border-radius: 30rpx;
			margin: 0 auto;
			//background-color: #1ABA69;
			padding-top: 150rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 710rpx;
			margin: 0 auto 24rpx;
			background: #F9F9F9;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}

		.tabs-con {
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;

			margin-top: 24rpx;
			background-color: #fff;

			.tab-item {

				position: relative;
				height: 98rpx;

				image {
					width: 356rpx;
					height: 98rpx;
					position: absolute;
					left: 0;
					top: 0;
				}

				.label {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #191919;
					height: 98rpx;
					line-height: 98rpx;
					position: relative;
					text-align: center;

					text {
						position: relative;
					}

					.sele-line {
						width: 50rpx;
						height: 14rpx;
						left: 50%;
						top: 80rpx;
						transform: translate(-50%, -50%);
					}
				}

				.selected {
					font-weight: 800;
					font-size: 30rpx;
					color: #E86748;
				}

				// .selected::after{
				// 	content: '';display: inline-block;position:absolute; left: 2px;top:28px; width: 30px;height: 4px;border-radius: 3px;
				// 	background-image: linear-gradient( 270deg, #FFFFFF 0%, #3C80FE 100%);
				// }
			}
		}


		.list-item {
			padding: 24rpx 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 24rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}

			.right-con {
				flex: 1;

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					max-width: 220rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline-block;
				}

				.date {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					margin-right: 16rpx;
				}

				.num {
					background: linear-gradient(270deg, #CC7DFD 0%, #6F47F9 100%);
					padding: 2rpx 6rpx;
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.status {
					padding: 8rpx 16rpx;
					border-radius: 45rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
				}

				.status-0 {
					color: #3C80FE;
					background: rgba(60, 128, 254, 0.1);
				}

				.status-1 {
					color: #1ABA69;
					background: rgba(26, 186, 105, 0.1);
				}

				.addr {
					margin-top: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7D7D7D;
				}
			}
		}
	}
</style>